import React, { Component, useCallback, useEffect, useState } from "react";
import {StyleSheet, Text, View, FlatList, Dimensions, ActivityIndicator} from 'react-native';
import { Lrc } from "react-native-lrc";
import { get163lyric } from "../../request/neteaseRequest";
import { getQlyric } from "../../request/QQRequest";
import { getMglyric } from "../../request/miguRequest";
import { getKwlyric } from "../../request/kuwoRequest";
import { getKglyric } from "../../request/kugouRequest";


export default function LyricComonent(props) {


  const [song,setSong] = useState(props.song);
  const [position,setPosition] = useState(props.position);
  if(song !== props.song){
    setSong(props.song);
  }

  useEffect(() => {
    if(!song.lyric){
      song.lyric = '';
      initLyric();

    }
  },[song])
  async function initLyric(){
    let {from,id} = song;
    switch (from){
      case '163':
        await get163lyric(id,(r) => {
          song.lyric = r;
          props.setCurrentMusic(song)
          setSong(song)
        })
        break;
      case 'qq':
        await getQlyric(id,(r) => {
          song.lyric = r;
          props.setCurrentMusic(song)
          setSong(song)
        })
        break;
      case 'migu':
        await getMglyric(id,(r) => {
          song.lyric = r;
          props.setCurrentMusic(song)
          setSong(song)
        })
        break;
      case 'kuwo':
        await getKwlyric(id,(r) => {
          song.lyric = r;
          props.setCurrentMusic(song)
          setSong(song)
        })
        break;
      case 'kugou':
        await getKglyric(id,song.albumid,(r) => {
          song.lyric = r;
          props.setCurrentMusic(song)
          setSong(song)
        })
        break;
    }
    props.loaded();
  }
  if(position !== props.position){
    setPosition(props.position);
  }
  // //console.log(lyric);
  // //console.log(position);
  const lineRenderer = useCallback(
    ({ lrcLine, index, active }) => {

      // //console.log(active +index+ lrcLine?.content);
      if(active){
        return (
          <Text
            style={{fontSize:20 ,textAlign: 'center', color: 'green' }}>
            {lrcLine?.content}
          </Text>
        )
      }else {
        return(
          <Text
            style={{fontSize:20 , textAlign: 'center', color: 'grey' }}>
            {lrcLine?.content}
          </Text>
        )
      }

    },
    [],
  );
  const onCurrentLineChange = useCallback(
    ({ lrcLine, index }) =>
      // //console.log(index, lrcLine?.content),
    [],
  );

  return (
    <View style={styles.container}>
      <View
        style={{
          height: itemHeight * visibleItemSize,
          justifyContent: 'center',
        }}>
        <Lrc
          lrc={song.lyric || ''}
          currentTime={position}
          lineHeight={24}
          lineRenderer={lineRenderer}
          onCurrentLineChange={onCurrentLineChange}
          showsVerticalScrollIndicator={false}
        />
      </View>
    </View>
  );


}
const screen = Dimensions.get('window');
const itemHeight = 80; // 如果可以确定高度，免去了渲染计算高度
const visibleItemSize = screen.height < 700 ? 5 : 7;
const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    overflow: 'hidden',
    padding: 10,
    marginBottom: 10
  },
  text: {
    height: itemHeight,
    fontSize: 20,
    textAlign: 'center',
    color: '#ffffff99',
  },
});
